<template>
  <div class="catalogs">
      <TextLoading v-if="tagList.length===0"></TextLoading>
      <div class="catalogs_list" v-else>
        <Catalog
          v-for="tag in tagList"
          :key="tag.id"
          :tag="tag"
          
        ></Catalog>
        <div class="space"></div>
      </div>
  </div>
</template>

<script>
import TextLoading from "components/public/TextLoading"
import Catalog from "components/home/catalogs/Catalog"
import {get} from "util/http"
export default {
  data(){
    return {
      tagList:[]
    }
  },
  async mounted(){
    let result=await get({
      url:"/ajax/mobileWeb/catalogroot"
    })
    this.tagList=result.info
    // this.tagList.splice(5,0,{
    //   "title": "日抓",
    //   "id": "41",
    //   "pic": "http://static.missevan.com/app/41.png"
    // })
  },
  components:{
    TextLoading,
    Catalog
  }
}
</script>

<style lang="stylus" scoped>
.catalogs
  min-height 100%
  flex 1
  display flex
  justify-content space-around
  .catalogs_list
    width 100%
    height 100%
    padding .14rem
    display flex
    flex-wrap wrap
    justify-content space-around
    .space
      width calc((100% - 0.2rem) / 3)
</style>